<template>
    <div>
        <el-container>
            <el-header style="text-align: left;border-bottom: 2px solid #ec771b">
                <p  style="margin-right: 15px">支付</p>
            </el-header>
            <el-main>
                <div style="border-bottom: 1px solid #ec771b">
                    <p  style="padding-bottom: 10px;text-align: left;font-size: 18px">选择金额</p>
                </div>
                <div >
                    <ul>
                        <li v-for="(i,index) in money" :key="index">
                            <div @click="handleMoney(i.yuan,index)"  :class="checkedIndex==index?'checkIndex':'checkIndexNull'" style="background-color: #fafafa;padding: 30px">
                                <p>{{i.yuan}}元</p>
                                <p>{{i.yuan*100}}阅饼</p>
                                <p v-if="i.present!=null">赠{{i.present}}代金券</p>
                            </div>
                        </li>
                    </ul>
                    <input type="text" v-model="qian" style="margin-bottom: 10px;border-radius: 5px;font-size: 15px"><br>
                    <el-button @click="payment()"  type="warning" round size="small">支付</el-button>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {

        name: '',
        components: {},
        props: {},
        data() {
            return {
                checkedIndex:-1,
                money:[
                    {
                        yuan:6,

                    },
                    {
                        yuan:12,
                    },
                    {
                        yuan:30,
                        present:1000
                    },
                    {
                        yuan:98,
                        present:3500
                    },
                    {
                        yuan:198,
                        present:9800
                    },
                    {
                        yuan:60,
                    }
                ],
                qian:"",
            }
        },
        computed: {},
        watch: {},
        methods: {
            payment(){
                alert("支付成功")
                this.qian=""
            },
            handleMoney(money,index){
                this.checkedIndex = index
                this.qian = money
            }
        },
        created() {

        },
        mounted() {
        },
    }

</script>

<style>
    .checkIndex {
        border: 1px solid #ec771b;
    }
    .checkIndexNull {

    }
    .el-header {
        padding: 0px;
    }
    element.style {
        height: 35px;
        text-align: left;
        border-bottom: 2px solid rgb(236, 119, 27);
    }
    .el-header p{
        font-size: 18px;
        color: #999;

    }
    .el-header a:hover{
        color: #ec771b;
    }
    div > ul > li {
        display: inline-block;
        margin: 25px;
        font-size: 15px;
    }
    div > ul > li > a {
        display: block;
        width: 100px;
        height: 70px;
        background-color: #f0f0f0;
    }
    div > ul > li > a:active{
        border: 1px solid #ec771b;
    }

</style>

